<style scoped>  
    .left-side {
        width: 200px;
        /*background: #2b3541;*/
        background: #EAEDF1;
        position: fixed;
        height: 100%;
        top: 48px;
        left: 0;
        height: 450px;
        overflow: hidden;
        transition: all .3s;
        z-index: 20;
        height: 100%;
        /*box-shadow: 0 1px 8px rgba(0,0,0,0.1);*/
        border-right: 1px solid #fff;
    }

    .left-side-inner {
        padding-top: 0px;
        margin-bottom: 10px;
    }
    
    .left-side-inner .ivu-menu-light {
    	background-color: #EAEDF1;
    }
    .left-side-inner .ivu-menu-light .ivu-menu-submenu {
    	border-bottom: 1px solid #E4E4E4;
    }
    .left-side-inner .ivu-menu-light .ivu-menu-opened .ivu-menu-submenu-title {
    	background-color: #F2F2F2;
    }
</style>
<template>
    <div class="left-side">
        <div class="left-side-inner ws-mscroll">
            <Menu ref="ue" class="ws-mscroll" :theme="wTheme" :accordion="false" @on-select="menuClick" width="200" :active-name="activeName" :open-names="opendNames">
            	<template v-for="(item, index) in navMenus">
	                <Submenu :name="item.data.indexPath">
	                    <template slot="title">
	                        <Icon type="ios-paper"></Icon>
	                        <span>{{item.data.label}}</span>
	                    </template>
	                    <template v-for="(item1, index1) in item.chs">
	                    	<MenuItem :name="item1.data.indexPath">{{item1.data.label}}</MenuItem>
	                    </template>
	                </Submenu>
                </template>
            </Menu>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery';
    import m from 'malihu-custom-scrollbar-plugin';
    import mw from 'jquery-mousewheel';
    import Util from '../../common/util.js';
    import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css';
    export default {
        props: {
        },
        data() {
            return {
            	opendNames: [],
            	activeName: ''
            }
        },
        computed: {
            /**
             * 系统皮肤
             * @return {[type]} [description]
             */
            wTheme() {
                let theme = this.$store.getters.framework_theme;
                return theme == 2 ? 'light' : 'dark';
            },
            //导航菜单
            navMenus() {
            	let menus_ = this.$store.getters.auth_nav_menus;
            	console.log(menus_);
            	this.init();
            	return menus_;
            },
            activeHeadIndex() {
            	let headIndex_ = this.$store.getters.auth_activeMenu_header;
            	return headIndex_;
            },
            activeNavIndex() {
            	let navPathIndex_ = this.$store.getters.auth_activeMenu_navPath;
            	return navPathIndex_;
            }
        },
        watch: {
        	activeHeadIndex: function(val, oldVal) {
        		this.updateMenu();
        	},
        	activeNavIndex: function(val, oldVal) {
        		this.updateMenu();
        	}
        },
        mounted() {
        	this.updateMenu();
        },
        methods: {
        	/**
        	 * 更新菜单
        	 */
        	updateMenu() {
        		let navActive_ = this.$store.getters.auth_nav_active;
//      		this.opendNames = navActive_.openNames; //存在对象引用,不能进行更新
				let openNames_ = navActive_.openNames;
				let copyOpenNames_ = [];
				for(let i = 0; i < openNames_.length; i++) {
					copyOpenNames_.push(openNames_[i]);
				}
				this.opendNames = copyOpenNames_;
        		this.activeName = navActive_.activeName;
        		this.$nextTick(function(){
        			this.$refs.ue.updateOpened();
        			this.$refs.ue.updateActiveName();
        		});
        	},
        	/**
        	 * 初始化
        	 */
            init() {
                var obj = this;
                this.$nextTick(function(){
                    this.bindScroll();
                    $(window).resize(function() {
                        obj.bindUpdateScroll();
                    });
                });
            },
            bindScroll() {
                let height = $(window).height();
                $('.left-side .left-side-inner').css('height', height - 48);   
                $('.left-side .left-side-inner').mCustomScrollbar({
                     theme:"minimal-dark",
                     scrollInertia : 500
                });               
            },
            bindUpdateScroll() {
                let height = $(window).height();
                $('.left-side .left-side-inner').css('height', height - 48);   
                $('.left-side .left-side-inner').mCustomScrollbar('update');               
            },
            /**
             * 菜单点击事件
             */
            menuClick(m_) {
            	this.activeName = m_;
				let menuIndexMap = this.$store.getters.auth_nav_index_map;
				let routeName = menuIndexMap[m_];
				if(routeName) {
					this.$router.push({ name: routeName });
				}
            }
        }
    }
</script>